<template>
  <div class="years">
    <p class="years_title">年度游客对比</p>
    <p><img src="../../../images/dataScreen-title.png" alt=""></p>
    <div class="years_charts" ref="charts"></div>
  </div>
</template>

<script setup lang='ts'>
// 引入相关组件
import dayjs from 'dayjs';
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
// 生成x轴数据
function generateDays(num = 12, format = 'MM') {
  let startTime = dayjs().startOf('year')
  let timeList = new Array(num).fill(null).map((item, index) => {
    return dayjs(startTime).add(index, 'month').format(format);
  });
  return timeList;
}
// 生成series数据
function generateList(num = 12, random = 100) {
  return new Array(num).fill(null).map((item) => {
    return { value: Math.ceil(Math.random() * 600) + random };
  });
}
const xAxisData = generateDays();
const seriesData1 = generateList(12, 15);
const seriesData2 = generateList(12, 25);
const seriesData3 = generateList(12, 30);
const legendData = ['2021年', '2022年', '2023年']
// 获取charts数据dom元素
let charts = ref()
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      icon: "rect",
      orient: "horizontal",
      left: "right",
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: '#fff',
        fontSize: '12px'
      },
      data: legendData
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '6%',
      top: 60,
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        boundaryGap: false,
        axisTick: {
          show: false, // 不显示坐标轴刻度线
        },
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(230, 247, 255, 0.50)',
          fontSize: 12,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '[人数]',
        nameTextStyle: {
          align: 'right',
          color: 'rgba(230, 247, 255, 0.50)',
        },
        //y右侧文字
        axisLabel: {
          color: 'rgba(230, 247, 255, 0.50)',
          fontSize: 12,
        },
        // y轴的分割线
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '2021年',
        type: 'line',
        smooth: true,
        symbol: 'none',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        lineStyle: {
          width: 1,
          shadowColor: '#6A583A',
          shadowBlur: 10,
        },
        areaStyle: {
          opacity: 0.4,
          //右下左上
          color: {
            type: 'linear',
            x: 0,  //右
            y: 0,  //下
            x2: 0,  //左
            y2: 1,  //上
            colorStops: [
              {
                offset: 0.1,
                color: '#5090FF' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#1057E5' // 100% 处的颜色
              }
            ]
          },
        },
        data: seriesData1,
      },
      {
        name: '2022年',
        type: 'line',
        smooth: true,
        symbol: 'none',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        lineStyle: {
          width: 1,
          shadowColor: '#6A583A',
          shadowBlur: 10,
        },
        areaStyle: {
          opacity: 0.8,
          //右下左上
          color: {
            type: 'linear',
            x: 0,  //右
            y: 0,  //下
            x2: 0,  //左
            y2: 1,  //上
            colorStops: [
              {
                offset: 0.1,
                color: '#01B3E4' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#DCF300' // 100% 处的颜色
              }
            ]
          },
        },
        data: seriesData2,
      },
      {
        name: '2023年',
        type: 'line',
        smooth: true,
        symbol: 'none',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        lineStyle: {
          width: 1,
          shadowColor: '#6A583A',
          shadowBlur: 10,
        },
        areaStyle: {
          opacity: 0.5,
          //右下左上
          color: {
            type: 'linear',
            x: 0,  //右
            y: 0,  //下
            x2: 0,  //左
            y2: 1,  //上
            colorStops: [
              {
                offset: 0.1,
                color: '#FAC858' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#F7E8C6' // 100% 处的颜色
              }
            ]
          },
        },
        data: seriesData3,
      },
    ],
  })
})
</script>

<style scoped lang="scss">
.years {
  margin: 15px 15px;
  width: 420px;
  height: 340px;
  background: url(../../../images/dataScreen-main-rb.png) no-repeat;
  background-size: 100% 100%;

  .years_title {
    color: white;
    font-size: 20px;

  }

  .years_charts {
    height: 320px;
  }

}
</style>